<template>
<a-modal v-model:visible="_d.visible" :title="_d.name"
  width="800px"
  wrap-class-name="article-modal"
  :footer="null"
  :bodyStyle="{
    minHeight: '600px'
  }">
  <div class="article-box">
    <v-md-preview :text="_d.text"></v-md-preview>
  </div>
</a-modal>
</template>

<script setup>
  import { reactive, ref, onMounted } from 'vue'
  import {Form, notification} from "ant-design-vue";

  import {ApiGet} from "@/api/request.js";

  const _d = reactive({
    visible: false,

    name: '',
    text: ''
  })

  function open(id) {
    getData(id);
    _d.visible = true;
  }

  // 获取详情
  function getData (id) {
    ApiGet(`Document/getdocument/${id}`).then(res => {
      _d.name = res.data.name;
      _d.text = res.data.content;
    })
  }

  defineExpose({
    open
  })

</script>
<style lang="less">
.article-modal {
  .ant-modal {
    top: 30px;
    padding-bottom: 0;
    .ant-modal-content {
      height: calc(100vh - 60px);
      display: flex;
      flex-direction: column;
      border-radius: 8px;
      overflow: hidden;
      .ant-modal-body {
        height: 0;
        flex: 1;
        overflow: auto;
      }
    }
  }
}
</style>